<template>
  <div>

    <div class="header" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c1">课程订单列表</span>
      <el-button class="b1" icon="el-icon-arrow-left">返回</el-button>
      <el-button class="b1" icon="el-icon-refresh">刷新</el-button>
    </div>

    <div class="container" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c2 el-icon-search">筛选查询</span>
      <el-button class="b2" @click="retreve">高级检索</el-button>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input v-model="formInline.orderNo" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item label="用户账号">
        <el-input v-model="formInline.account" placeholder="用户账号"></el-input>
      </el-form-item>

      <el-form-item label="支付方式">
        <el-select v-model="formInline.orderPaymentChannel" placeholder="支付方式">
          <el-option label="查看所有" value=""></el-option>
          <el-option label="查看未支付" value="1"></el-option>
          <el-option label="微信支付," value="2"></el-option>
          <el-option label="余额支付" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交日期">
        <el-date-picker
            v-model="formInline.createDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmi">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        ref="multipleTable"
        border
        :data=" tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="orderNo"
          label="订单编号"
          width="120">
      </el-table-column>
      <el-table-column
          label="提交时间"
          width="120">
        <template slot-scope="scope">{{ scope.row.createDate }}</template>
      </el-table-column>
      <el-table-column
          prop="account"
          label="用户账号"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="logisticsFee"
          label="订单金额"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="orderPaymentChannel"
          label="支付方式"
          :formatter="assignment"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="orderSource"
          label="订单来源"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="orderStatus"
          label="订单状态"
          :formatter="orderStatus"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          :formatter="assignmene"
          prop="orderType"
          label="类型"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="220">
        <template slot-scope="scope">
          <router-link to="Detailed">
          <el-button
              @click="ck(scope.row)"
              type="text"
              size="small">
              查看订单
          </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <div >
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount">
      </el-pagination>
    </div>

    <el-dialog title="高级检索" :visible.sync="retrieve2">
      <el-form>
        <el-form-item label="订单编号：" >
          <el-input v-model="formInline.account" placeholder="订单编号"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" >
          <el-input v-model="formInline.account" placeholder="用户账号"></el-input>
        </el-form-item>
        <el-form-item label="支付方式" >
          <el-select  placeholder="全部">
            <el-option label="微信支付" value="shanghai"></el-option>
            <el-option label="余额支付" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单来源" >
          <el-select  placeholder="全部">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态" >
          <el-select  placeholder="全部">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交时间">
          <el-date-picker
              v-model="formInline.createDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset(form)">重 置</el-button>
        <el-button type="primary" @click="retreve">开始检索</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import axios from "axios";
axios.defaults.baseURL="http://localhost:9999/";
export default {
  name: "JsUserOrderDao",
  data() {

    return {
      formLabelWidth:'120px',
      retrieve2:false,
      // 总数据
      // 默认显示第几页
      currentPage:1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:1,
      // 个数选择器（可修改）
      pageSizes:[10,20,30,40],
      // 默认每页显示的条数（可修改）
      PageSize:10,
      form:[
        {}
      ],
      tableData: [{
      }],
      multipleSelection: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      createDate:'',
      formInline: {
        logisticsFee:'',//订单金额
        shopId:'',//购买id
        account:'',//用户账号
        orderNo: '',//订单编号
        orderPaymentChannel: '',//支付方式
        createDate:'',//下单时间
        orderType:2,//类型
      }
    };
  },
  created() {
    this.onSubmi();
  },
  methods: {
    ck(row){
      this.$store.commit('shopDingdan',row.shopId)
      console.log(row.shopId)
    },
    retreve(){
      this.retrieve2=!this.retrieve2
    },
    assignment(formInline){
      if ( formInline.orderPaymentChannel==2){
        return"微信"
      }else if (formInline.orderPaymentChannel==3){
        return "余额"
      }else {
        return "未支付"
      }
    },
    orderStatus(formInline){
      if (formInline.orderStatus==2){
        return "待付款"
      }else if (formInline.orderStatus==3){
        return "已付款"
      }else if (formInline.orderStatus==4){
        return "待发货"
      }else if (formInline.orderStatus==5){
        return "已发货"
      }else if (formInline.orderStatus==6){
        return "已签收"
      }else if (formInline.orderStatus==7){
        return "退货申请"
      }else if (formInline.orderStatus==8){
        return "退货申请"
      }else if (formInline.orderStatus==9){
        return "退货中"
      }else if (formInline.orderStatus==10){
        return "取消交易"
      }
    },
    assignmene(formInline){
      if (formInline.orderType==2){
        return "课程"
      }else if (formInline.orderType==3){
        return "商品"
      }
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize=val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val
    },
    async onSubmi(){
      const res= await axios.post("JsUserOrder/getall", this.formInline);
      this.tableData=res.data;
      this.totalCount=res.data.length;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>


<style >
.list {
  background-color: #F6F7F9;
}

.header {
  margin: -10px -20px 0px -20px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.container {
  margin: 20px -20px 0px -10px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.container2 {
  margin: 0px -20px 0px -10px;
  height: 70px;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
}

.foot {
  margin: 20px 0px 0px -10px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.c1 {
  float: left;
  line-height: 40px;
  margin: 10px 0px 0px 20px;
}

.c2 {
  float: left;
  margin: 20px 0px 0px 30px;
}

.b1 {
  float: right;
}

.b2 {
  float: right;
}
.el-header, .el-footer,.el-aside {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 20px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 20px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 20px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 30px;
}
.b2 {
  float: right;
  margin: 10px 20px 0px 0px
}
</style>